<template>
  <div>
    <div class="node-wrap" v-if="nodeConfig.nodeType != 2 && nodeConfig.nodeType != 3 && nodeConfig.nodeType != 6 && nodeConfig.nodeType != 7">
      <div class="node-wrap-box" :class="(nodeConfig.nodeType == 0 ? 'start-node ' : '') + (isTried && nodeConfig.error ? 'active error' : '')" @click.stop="setPerson(nodeConfig.nodeType)">
        <div>
          <div class="title" :class="'active' + nodeConfig.nodeType">
            <span class="iconfont" v-show="nodeConfig.nodeType == 4" :style="{ color: nodeConfig.remark == 'hidden' ? 'red' : 'white' }">  </span>
            <span class="iconfont" v-show="nodeConfig.nodeType == 5"></span>
            <!-- 文本输入 -->
            <input type="text" class="ant-input editable-title-input" v-if="isInput" @blur="blurEvent()" @focus="$event.currentTarget.select()" v-focus v-model="nodeConfig.nodeName" :placeholder="placeholderList[nodeConfig.nodeType]" />
            <!-- 点击修改标题 -->
            <span class="editable-title" @click.stop="clickEvent()" v-if="!isInput">{{ nodeConfig.nodeName }}</span>

            <i class="anticon anticon-close close" v-if="nodeConfig.type != 0" @click.stop="delNode()"></i>
          </div>
          <div class="content">
            <div class="text-style" v-if="nodeConfig.nodeType == 1">
              <template v-if="nodeConfig.organizeApproveRule == 1"> 逐级别到主管 </template>
              <template v-else-if="nodeConfig.organizeApproveRule == 2"> 直接到主管 </template>
              <template v-else-if="nodeConfig.organizeApproveRule == 3"> 不审批 </template>
              <template v-else-if="nodeConfig.organizeApproveRule == 5"> 逐级到{{ nodeConfig.approveLevel }}级部门主管 </template>
              <template v-else-if="nodeConfig.organizeApproveRule == 6"> 直接到{{ nodeConfig.approveLevel }}级部门主管 </template>
              <template v-else>
                {{ nodeConfig.organizeName ? nodeConfig.organizeName : nodeConfig.nodeName }}
              </template>
            </div>
            <div class="text-style" v-if="nodeConfig.nodeType == 4">
              <template v-if="nodeConfig.nodeApproveType == 2"> 上级部门主管 </template>
              <template v-else-if="nodeConfig.nodeApproveType == 5"> 部门vp </template>
              <template v-else>
                {{ nodeConfig.organizeName ? nodeConfig.organizeName : nodeConfig.nodeName }}
              </template>
            </div>
            <div class="text-style" v-if="nodeConfig.nodeType == 5">
              <template v-if="nodeConfig.nodeApproveType == 2"> 上级部门主管 </template>
              <template v-else-if="nodeConfig.nodeApproveType == 5"> 部门vp </template>
              <template v-else>
                {{ nodeConfig.organizeName ? nodeConfig.organizeName : nodeConfig.nodeName }}
              </template>
            </div>
            <i class="anticon anticon-right arrow"></i>
          </div>
          <div class="error_tip" v-if="isTried && nodeConfig.error">
            <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67)"></i>
          </div>
        </div>
      </div>
      <addNode :childNodeP.sync="nodeConfig"></addNode>
    </div>
    <!-- 分支条件模块 -->
    <div class="branch-wrap" v-if="nodeConfig.nodeType == 2">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <button class="add-branch" @click="addTerm(1)">添加条件</button>
          <div class="col-box" v-for="(item, index) in nodeConfig.procNodeRuleList" :key="index">
            <span class="line-box"></span>
            <div class="condition-node">
              <div class="condition-node-box">
                <span class="line-box"></span>
                <div class="auto-judge" :class="isTried && item.error ? 'error active' : ''" @click.stop="setPerson(index + 1)">
                  <div class="title-wrapper">
                    <input type="text" class="ant-input editable-title-input" v-if="isInputList[index]" @blur="blurEvent(index, item.nodeType)" @focus="$event.currentTarget.select()" v-focus v-model="item.nodeName" />
                    <span class="editable-title" @click.stop="clickEvent(index)" v-if="!isInputList[index]">{{ item.nodeName }}</span>
                    <span class="priority-title">优先级{{ item.conditionLevel }}</span>
                    <i class="anticon anticon-close close" @click.stop="delTerm(index, item.nodeType)"></i>
                  </div>
                  <div class="content" style="width: 210px; height: 30px">
                    {{ arrToStr(item.procNodeConditionList, 2) ? arrToStr(item.procNodeConditionList, 2) : '发起人自选' }}
                  </div>
                  <div class="error_tip" v-if="isTried && item.error">
                    <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67)"></i>
                  </div>
                </div>
                <addNode :childNodeP.sync="item"></addNode>
              </div>
            </div>
            <nodeWrap v-if="item.childNode && item.childNode" :parentNode.sync="item" :info-data="infoData" :nodeConfig.sync="item.childNode"> </nodeWrap>

            <div class="top-left-cover-line" v-if="index == 0"></div>
            <div class="bottom-left-cover-line" v-if="index == 0"></div>
            <div class="top-right-cover-line" v-if="index == nodeConfig.procNodeRuleList.length - 1"></div>
            <div class="bottom-right-cover-line" v-if="index == nodeConfig.procNodeRuleList.length - 1"></div>
          </div>
        </div>
        <addNode :childNodeP.sync="nodeConfig"></addNode>
      </div>
    </div>
    <!-- 审批人分支 -->
    <div class="branch-wrap" v-if="nodeConfig.nodeType == 6">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <button class="add-branch" v-if="nodeConfig.procNodeCountersignList.length" @click="addTerm(2)">添加会签</button>
          <div class="col-box" v-for="(item, index) in nodeConfig.procNodeCountersignList" :key="index">
            <span class="line-box"></span>
            <div class="condition-node">
              <div class="condition-node-box">
                <span class="line-box"></span>
                <div class="auto-judges" :class="isTried && item.error ? 'error active' : ''" @click.stop="setPerson(index + 1)">
                  <div class="title-wrapper">
                    <div class="title" :style="'background: rgb(' + ['87, 106, 149', '255, 148, 62', '50, 150, 250'][1] + ');'">
                      <span class="iconfont"></span>
                      <input type="text" class="ant-input editable-title-input" v-if="isInputList[index]" @blur="blurEvent(index, item.nodeType)" @focus="$event.currentTarget.select()" v-focus v-model="item.nodeName" />
                      <!-- 点击修改标题 -->
                      <span class="editable-title" @click.stop="clickEvent(index)" v-if="nodeConfig.nodeType != 0 && !isInput">{{ item.nodeName }}</span>

                      <i class="anticon anticon-close close" v-if="nodeConfig.nodeType != 0" @click.stop="delTerm(index, item.nodeType)"></i>
                    </div>
                    <div class="content">
                      <div class="text-style">
                        <template v-if="item.nodeApproveType == 2"> 上级部门主管 </template>
                        <template v-else-if="item.nodeApproveType == 5"> 部门vp </template>
                        <template v-else="item.nodeApproveType == 3">
                          {{ item.organizeName ? item.organizeName : item.nodeName }}
                        </template>
                      </div>

                      <i class="anticon anticon-right arrow"></i>
                    </div>
                    <div class="error_tip" v-if="isTried && nodeConfig.error">
                      <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67)"></i>
                    </div>
                  </div>
                </div>
                <addNode :childNodeP.sync="item"></addNode>
              </div>
            </div>
            <nodeWrap v-if="item.childNode && item.childNode" :parentNode.sync="item" :nodeConfig.sync="item.childNode"> </nodeWrap>

            <div class="top-left-cover-line" v-if="index == 0"></div>
            <div class="bottom-left-cover-line" v-if="index == 0"></div>
            <div class="top-right-cover-line" v-if="index == nodeConfig.procNodeCountersignList.length - 1"></div>
            <div class="bottom-right-cover-line" v-if="index == nodeConfig.procNodeCountersignList.length - 1"></div>
          </div>
        </div>
        <addNode :childNodeP.sync="nodeConfig"></addNode>
      </div>
    </div>
    <!-- 发起人模块 -->
    <el-drawer title="发起人" :visible.sync="promoterDrawer" :append-to-body="true" direction="rtl" class="set_promoter" size="550px">
      <div class="demo-drawer__content">
        <div class="drawer_content">
          <div class="approver_some">
            <p class="promoter_content_title">内部审批规则</p>

            <el-radio-group v-model="promoterConfig.organizeApproveRule" class="clear">
              <el-radio :label="3" value="3">不审批</el-radio>
              <el-radio :label="1" value="1">逐级别到主管</el-radio>
              <el-radio :label="2" value="2">直接到主管</el-radio>
              <el-radio :label="5" value="5">逐级到n级部门主管</el-radio>
              <el-radio :label="6" value="6">直接到n级部门主管</el-radio>
            </el-radio-group>
          </div>

          <div class="approver_some" v-if="promoterConfig.organizeApproveRule == 5 || promoterConfig.organizeApproveRule == 6">
            <p>部门级别</p>
            <el-input-number v-model="promoterConfig.approveLevel" :min="1" :max="100" label="部门级别"></el-input-number>
          </div>
        </div>
        <div class="demo-drawer__footer clear">
          <el-button type="primary" class="button-sub" @click="savePromoter">确 定</el-button>
          <el-button @click="promoterDrawer = false">取 消</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 审批人设置模块 -->
    <el-drawer title="审批人设置" :visible.sync="approverDrawer" direction="rtl" class="set_promoter" size="550px" :append-to-body="true">
      <div class="demo-drawer__content">
        <div class="drawer_content">
          <div class="approver_some">
            <p>审批节点显隐类型</p>
            <el-radio-group v-model="approverConfig.remark" class="clear">
              <el-radio label="show" value="show">显示节点</el-radio>
              <el-radio label="hidden" value="hidden">隐藏节点</el-radio>
            </el-radio-group>
          </div>

          <div class="approver_some">
            <p>审批节点类型</p>
            <el-radio-group v-model="approverConfig.nodeApproveType" class="clear">
              <el-radio :label="1" value="1">静态节点</el-radio>
              <el-radio :label="2" value="2">上级部门主管</el-radio>
              <el-radio :label="5" value="5">部门vp</el-radio>
              <el-radio :label="3" value="3">自定义业务</el-radio>
              <el-radio :label="4" value="4">自定义审批人</el-radio>
              <el-radio :label="6" value="6">自定义查询</el-radio>
            </el-radio-group>
          </div>

          <div class="approver_some">
            <p>节点推送设置</p>
            <el-radio-group v-model="approverConfig.ifGroupNode" class="clear">
              <el-radio :label="0" value="0">默认</el-radio>
              <el-radio :label="1" value="1">集团</el-radio>
            </el-radio-group>
          </div>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 1">
            <p>审批组织</p>
            <el-select v-model="approverConfig.organizeCode" class="approver_some_select" placeholder="请选审批组织" @change="onchangeName">
              <el-option v-for="(item, index) in approvalOrganizeList" :label="item.orgName" :value="item.primaryKey" :key="index"></el-option>
            </el-select>
          </div>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 1 && approverConfig.organizeCode">
            <p>审批描述</p>
            <el-input v-model="approverConfig.organizeName" class="approver_some_select" placeholder="请输入审批描述"></el-input>
          </div>

          <template v-if="approverConfig.nodeApproveType == 5">
            <div class="approver_some">
              <p>审批描述</p>
              <el-input v-model="approverConfig.organizeName" class="approver_some_select" placeholder="请输入审批描述"></el-input>
            </div>

            <div class="approver_some">
              <p>部门级别</p>
              <el-input-number v-model="approverConfig.approveLevel" :min="1" :max="100" label="部门级别"></el-input-number>
            </div>
          </template>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 3">
            <p>审批组织</p>
            <el-select v-model="approverConfig.fieldKey" class="approver_some_select" placeholder="请选审批组织" @change="onchangeField">
              <el-option v-for="(item, index) in fieldList" :label="item.fieldName" :value="item.fieldKey" :key="index"></el-option>
            </el-select>
          </div>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 3 && approverConfig.fieldKey">
            <p>审批描述</p>
            <el-input v-model="approverConfig.fieldName" class="approver_some_select" placeholder="请输入审批描述"></el-input>
          </div>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 4">
            <p>审批组织</p>
            <el-select v-model="approverConfig.orgKey" class="approver_some_select" placeholder="请选审批组织" @change="onchangeFieldOrgName">
              <el-option v-for="(item, index) in fieldList" :label="item.fieldName" :value="item.fieldKey" :key="index"></el-option>
            </el-select>
          </div>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 4 && approverConfig.orgKey">
            <p>审批描述</p>
            <el-input v-model="approverConfig.orgName" class="approver_some_select" placeholder="请输入审批描述"></el-input>
          </div>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 4">
            <p>审批人</p>
            <el-select v-model="approverConfig.fieldName" class="approver_some_select" placeholder="请选审批人" @change="onchangeField">
              <el-option v-for="(item, index) in fieldList" :label="item.fieldName" :value="item.fieldKey" :key="index"></el-option>
            </el-select>
          </div>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 1">
            <p>部门审批规则</p>
            <el-radio-group v-model="approverConfig.organizeApproveRule" class="clear">
              <el-radio :label="2" value="2">直接到主管</el-radio>
              <el-radio :label="7" value="7">内部人员审批</el-radio>
            </el-radio-group>
          </div>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 3">
            <p>部门审批规则</p>
            <el-radio-group v-model="approverConfig.organizeApproveRule" class="clear">
              <el-radio :label="1" value="1">逐级到主管</el-radio>
              <el-radio :label="2" value="2">直接到主管</el-radio>
              <el-radio :label="4" value="4">直接到总经理</el-radio>
              <el-radio :label="5" value="5">逐级到n级部门主管</el-radio>
              <el-radio :label="6" value="6">直接到n级部门主管</el-radio>
            </el-radio-group>
          </div>

          <template v-if="approverConfig.nodeApproveType == 3">
            <div class="approver_some" v-if="approverConfig.organizeApproveRule == 5 || approverConfig.organizeApproveRule == 6">
              <p>部门级别</p>
              <el-input-number v-model="approverConfig.approveLevel" :min="1" :max="100" label="部门级别"></el-input-number>
            </div>
          </template>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 6">
            <p>审批描述</p>
            <el-input v-model="approverConfig.organizeName" class="approver_some_select" placeholder="请输入审批描述" @change="onchangeRemark"> </el-input>
          </div>
          <div class="approver_some" v-if="approverConfig.nodeApproveType == 6">
            <p>查询参数</p>
            <el-select v-model="approverConfig.userApiParamArr" class="approver_some_select" placeholder="请选查询参数" multiple>
              <el-option v-for="(item, index) in fieldList" :label="item.fieldName" :value="item.fieldKey" :key="index"></el-option>
            </el-select>
          </div>

          <div class="approver_some" v-if="approverConfig.nodeApproveType == 6">
            <p>查询接口</p>
            <el-input v-model="approverConfig.userApi" class="approver_some_select" placeholder="请输入查询接口"> </el-input>
          </div>
        </div>
        <div class="demo-drawer__footer clear">
          <el-button type="primary" class="button-sub" @click="saveApprover">确 定</el-button>
          <el-button @click="approverDrawer = false">取 消</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 抄送人设置模块 -->
    <el-drawer title="抄送人设置" :visible.sync="copyerDrawer" direction="rtl" class="set_promoter" size="550px" :append-to-body="true">
      <div class="demo-drawer__content">
        <div class="drawer_content">
          <div class="approver_some">
            <p>抄送节点类型</p>
            <el-radio-group v-model="copyerConfig.nodeApproveType" class="clear">
              <el-radio :label="1" value="1">静态节点</el-radio>
              <el-radio :label="2" value="2">上级部门主管</el-radio>
              <el-radio :label="5" value="5">部门vp</el-radio>
              <el-radio :label="3" value="3">自定义业务</el-radio>
              <el-radio :label="4" value="4">自定义抄送人</el-radio>
              <el-radio :label="6" value="6">自定义查询</el-radio>
            </el-radio-group>
          </div>

          <div class="approver_some">
            <p>节点推送设置</p>
            <el-radio-group v-model="copyerConfig.ifGroupNode" class="clear">
              <el-radio :label="0" value="0">默认</el-radio>
              <el-radio :label="1" value="1">集团</el-radio>
            </el-radio-group>
          </div>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 1">
            <p>抄送组织</p>
            <el-select v-model="copyerConfig.organizeCode" class="approver_some_select" placeholder="请选抄送组织" @change="onchangeCopyName">
              <el-option v-for="(item, index) in approvalOrganizeList" :label="item.orgName" :value="item.primaryKey" :key="index"></el-option>
            </el-select>
          </div>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 1 && copyerConfig.organizeCode">
            <p>抄送描述</p>
            <el-input v-model="copyerConfig.organizeName" class="approver_some_select" placeholder="请输入抄送描述"></el-input>
          </div>

          <template v-if="copyerConfig.nodeApproveType == 5">
            <div class="approver_some">
              <p>抄送描述</p>
              <el-input v-model="copyerConfig.organizeName" class="approver_some_select" placeholder="请输入抄送描述"></el-input>
            </div>

            <div class="approver_some">
              <p>部门级别</p>
              <el-input-number v-model="copyerConfig.approveLevel" :min="1" :max="100" label="部门级别"></el-input-number>
            </div>
          </template>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 3">
            <p>抄送组织</p>
            <el-select v-model="copyerConfig.fieldKey" class="approver_some_select" placeholder="请选抄送组织" @change="onchangeCsField">
              <el-option v-for="(item, index) in fieldList" :label="item.fieldName" :value="item.fieldKey" :key="index"></el-option>
            </el-select>
          </div>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 3 && copyerConfig.fieldKey">
            <p>抄送描述</p>
            <el-input v-model="copyerConfig.fieldName" class="approver_some_select" placeholder="请输入抄送描述"></el-input>
          </div>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 4">
            <p>抄送描述</p>
            <el-input v-model="copyerConfig.orgName" class="approver_some_select" placeholder="请输入抄送描述"></el-input>
          </div>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 4">
            <p>抄送人</p>
            <el-select v-model="copyerConfig.fieldKey" class="approver_some_select" placeholder="请选抄送人" @change="onchangeCsField">
              <el-option v-for="(item, index) in fieldList" :label="item.fieldName" :value="item.fieldKey" :key="index"></el-option>
            </el-select>
          </div>

          <div class="approver_some">
            <p>任务单</p>
            <el-select v-model="copyerConfig.remark" class="approver_some_select" placeholder="请选任务单">
              <el-option label="无" value=""></el-option>
              <el-option v-for="item in mangeList" :label="item.taskTitle" :value="item.primaryKey" :key="item.index"></el-option>
            </el-select>
          </div>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 1">
            <p>部门抄送规则</p>
            <el-radio-group v-model="copyerConfig.organizeApproveRule" class="clear">
              <el-radio :label="2" value="2">直接到主管</el-radio>
              <el-radio :label="7" value="7">内部人员审批</el-radio>
            </el-radio-group>
          </div>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 3">
            <p>部门抄送规则</p>
            <el-radio-group v-model="copyerConfig.organizeApproveRule" class="clear">
              <el-radio :label="1" value="1">逐级到主管</el-radio>
              <el-radio :label="2" value="2">直接到主管</el-radio>
              <el-radio :label="4" value="4">直接到总经理</el-radio>
              <el-radio :label="5" value="5">逐级到n级部门主管</el-radio>
              <el-radio :label="6" value="6">直接到n级部门主管</el-radio>
            </el-radio-group>
          </div>

          <template v-if="copyerConfig.nodeApproveType == 3">
            <div class="approver_some" v-if="copyerConfig.organizeApproveRule == 5 || copyerConfig.organizeApproveRule == 6">
              <p>部门级别</p>
              <el-input-number v-model="copyerConfig.approveLevel" :min="1" :max="100" label="部门级别"></el-input-number>
            </div>
          </template>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 6">
            <p>审批描述</p>
            <el-input v-model="copyerConfig.organizeName" class="approver_some_select" placeholder="请输入审批描述" @change="onchangeCopyRemark"> </el-input>
          </div>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 6">
            <p>查询参数</p>
            <el-select v-model="copyerConfig.userApiParamArr" class="approver_some_select" placeholder="请选查询参数" multiple>
              <el-option v-for="(item, index) in fieldList" :label="item.fieldName" :value="item.fieldKey" :key="index"></el-option>
            </el-select>
          </div>

          <div class="approver_some" v-if="copyerConfig.nodeApproveType == 6">
            <p>查询接口</p>
            <el-input v-model="copyerConfig.userApi" class="approver_some_select" placeholder="请输入查询接口"> </el-input>
          </div>
        </div>
        <div class="demo-drawer__footer clear copyer-btn-box">
          <el-button type="primary" class="button-sub" @click="saveMakeCopy">确 定</el-button>
          <el-button @click="copyerDrawer = false">取 消</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 条件设置模块 -->
    <el-drawer title="条件设置" :visible.sync="conditionDrawer" direction="rtl" class="condition_copyer" size="550px" :append-to-body="true">
      <div class="demo-drawer__content">
        <div class="auto_overflow">
          <div class="condition_content drawer_content" style="border-bottom: 1px solid #f5f5f5" v-for="(item, index) in conditionConfig.procNodeConditionList" :key="index">
            <div class="condition_content-box" v-if="item.conditionType == 2">
              <span class="">字段名称</span>
              <el-input v-model="item.fieldName" class="condition_content-input"></el-input>
              <el-button @click="delFromItem(index)" type="danger" icon="el-icon-delete"></el-button>
            </div>
            <div class="condition_content-box" v-else>
              <span class="">字段名称</span>
              <el-select v-model="item.fieldName" class="condition_content-input" placeholder="请选择字段名称" @change="fieldNameChange">
                <el-option :value="[keys.fieldName, keys.fieldKey, index]" :label="keys.fieldName" v-for="(keys, inde) in fromNameList" :key="inde"></el-option>
              </el-select>
              <el-button @click="delFromItem(index)" type="danger" icon="el-icon-delete"></el-button>
            </div>
            <div class="condition_content-box">
              <span class="">判断条件</span>
              <el-select v-model="item.conditionValue" class="condition_content-input" placeholder="请选择判断条件">
                <el-option :value="item.conditionTypeCode" :label="item.condtiionTypeName" v-for="(item, index) in conditionValueList" :key="index"></el-option>
              </el-select>
            </div>
            <div class="condition_content-box">
              <span class="">字段键</span>
              <el-input v-model="item.fieldKey" :disabled="item.conditionType == 1" class="condition_content-input"> </el-input>
            </div>
            <div class="condition_content-box">
              <span class="">字段值</span>
              <el-input v-model="item.fieldValue" class="condition_content-input"></el-input>
            </div>
          </div>
        </div>
        <div class="approver_some">
          <el-button @click="addFromItem(1)">表单条件</el-button>
          <el-button @click="addFromItem(2)">自定义条件</el-button>
        </div>

        <div class="demo-drawer__footer clear" style="margin-top: 20px">
          <el-button type="primary" class="button-sub" @click="saveCondition">确 定</el-button>
          <el-button @click="conditionDrawer = false">取 消</el-button>
        </div>
      </div>
    </el-drawer>
    <nodeWrap v-if="nodeConfig.childNode && nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode" :parentNode.sync="nodeConfig"></nodeWrap>
  </div>
</template>
<script>
  import { processGenerateKey, processConditionValueList, processFormConditionList, processSaveWorkFlow, approvalOrganize, apiGetRoleList, apiCcManageList } from '../../api/process';
  import { showMessage } from '@g/js/message';

  import list from './list';
  import addNode from './addNode';
  export default {
    props: ['parentNode', 'nodeConfig', 'flowPermission', 'directorMaxLevel', 'isTried', 'tableId', 'infoData'],
    data() {
      return {
        placeholderList: ['发起人', '审核人', '抄送人'],
        isInputList: [],
        isInput: false,
        promoterVisible: false,
        promoterDrawer: false,
        departments: {},
        checkedDepartmentList: [],
        checkedEmployessList: [],
        promoterSearchName: '',
        flowPermission1: this.flowPermission,
        approverDrawer: false,
        approverVisible: false,
        approverRoleVisible: false,
        approverConfig: {},
        approversConfig: {
          procNodeCountersignList: [],
        },
        approverEmplyessList: [],
        approverSearchName: '',
        roles: [],
        roleList: [],
        approverRoleSearchName: '',
        copyerDrawer: false,
        copyerVisible: false,
        copyerConfig: {},
        copyerSearchName: '',
        activeName: '1',
        copyerEmployessList: [],
        copyerRoleList: [],
        ccSelfSelectFlag: [],
        conditionDrawer: false,
        conditionVisible: false,
        conditionConfig: {},
        conditionsConfig: {
          procNodeRuleList: [],
        },
        bPriorityLevel: '',
        conditions: [],
        procNodeRuleList: [],
        conditionRoleVisible: false,
        conditionRoleSearchName: '',
        conditionDepartmentList: [],
        conditionEmployessList: [],
        conditionRoleList: [],
        fromNameList: [],
        fieldList: [],

        promoterConfig: {},
        fromKey: '',
        approvalOrganizeList: [], //审批组织
        mangeList: [],
      };
    },
    watch: {
      nodeConfig: {
        handler(val) {},
        deep: true,
      },
    },
    async mounted() {},
    components: { addNode },
    methods: {
      clickEvent(index) {
        if (index || index === 0) {
          this.$set(this.isInputList, index, true);
        } else {
          this.isInput = true;
        }
      },
      blurEvent(index) {
        if (index || index === 0) {
          this.$set(this.isInputList, index, false);
        } else {
          this.isInput = false;
        }
      },
      conditionStr(item, index) {
        var { procNodeRuleList, nodeUserList } = item;
      },
      dealStr(str, obj) {
        let arr = [];
        let list = str.split(',');
        for (var elem in obj) {
          list.map(item => {
            if (item == elem) {
              arr.push(obj[elem].value);
            }
          });
        }
        return arr.join('或');
      },
      saveCondition() {
        for (var i = 0; i < this.conditionConfig.procNodeConditionList.length; i++) {
          this.conditionConfig.procNodeConditionList[i].nodeCode = this.parentNode.childNode.procNodeRuleList[this.bPriorityLevel - 1].primaryKey;
          // if (!this.conditionConfig.procNodeRuleList[i].fieldName) {
          //   showMessage("请输入字段名称", "warning");
          //   return;
          // }
          // if (!this.conditionConfig.procNodeRuleList[i].conditionValue) {
          //   showMessage("请输入条件", "warning");
          //   return;
          // }
          // if (!this.conditionConfig.procNodeRuleList[i].fieldValue) {
          //   showMessage("请输入字段值", "warning");
          //   return;
          // }
          // if (!this.conditionConfig.procNodeRuleList[i].fieldKey) {
          //   showMessage("请输入字段建", "warning");
          //   return;
          // }
        }
        this.conditionDrawer = false;
        this.$emit('update:nodeConfig', this.conditionsConfig);
      },

      handleClick() {
        console.log(this.activeName);
        this.copyerSearchName = '';
        this.conditionRoleSearchName = '';
        if (this.activeName == 1) {
          this.getDepartmentList();
        } else {
          this.getRoleList();
        }
      },
      // 搜索成员
      getDebounceData(event, type = 1) {},
      andleClick() {
        this.copyerSearchName = '';
        this.conditionRoleSearchName = '';
        if (this.activeName == 1) {
          this.getDepartmentList();
        } else {
          this.getRoleList();
        }
      },
      addCopyer() {
        this.copyerSearchName = '';
        this.copyerVisible = true;
        this.activeName = '1';
        this.getDepartmentList();
      },
      sureCopyer() {
        this.copyerConfig.nodeUserList = [];
        this.copyerEmployessList.map(item => {
          this.copyerConfig.nodeUserList.push({
            type: 5,
            targetId: item.id,
            name: item.employeeName,
          });
        });
        this.copyerRoleList.map(item => {
          this.copyerConfig.nodeUserList.push({
            type: 5,
            targetId: item.roleId,
            name: item.roleName,
          });
        });
        this.copyerVisible = false;
      },
      saveCopyer() {
        this.$emit('update:nodeConfig', this.copyerConfig);
        this.copyerDrawer = false;
      },
      removeStrEle(item, key) {
        let a = item.zdy1 ? item.zdy1.split(',') : [];
        var includesIndex;
        a.map((item, index) => {
          if (item == key) {
            includesIndex = index;
          }
        });
        a.splice(includesIndex, 1);
        item.zdy1 = a.toString();
      },
      toggleClass(arr, elem, key = 'id') {
        return arr.some(item => {
          return item[key] == elem[key];
        });
      },
      toChecked(arr, elem, key = 'id') {
        var isIncludes = this.toggleClass(arr, elem, key);
        !isIncludes ? arr.push(elem) : this.removeEle(arr, elem, key);
      },
      removeEle(arr, elem, key = 'id') {
        var includesIndex;
        arr.map((item, index) => {
          if (item[key] == elem[key]) {
            includesIndex = index;
          }
        });
        arr.splice(includesIndex, 1);
      },
      async getRoleList() {
        let res = await apiGetRoleList();
        this.roles = res.data.list;
      },
      getDepartmentList(parentId) {
        console.log(parentId);
        this.departments = list.data;
      },
      saveApprover() {
        var { nodeType } = this.nodeConfig;

        if (!this.approverConfig.nodeApproveType) {
          showMessage('请选择审批节点类型', 'warning');
          return;
        }

        if (this.approverConfig.nodeApproveType == 1 && !this.approverConfig.organizeName) {
          showMessage('请选择审批组织', 'warning');
          return;
        }

        if (this.approverConfig.nodeApproveType == 3 && !this.approverConfig.fieldKey) {
          showMessage('请选择审批组织', 'warning');
          return;
        }

        if (this.approverConfig.nodeApproveType == 4 && !this.approverConfig.orgKey) {
          showMessage('请选择审批组织', 'warning');
          return;
        }

        if (this.approverConfig.nodeApproveType == 4 && !this.approverConfig.fieldName) {
          showMessage('请选择审批人', 'warning');
          return;
        }

        if ((this.approverConfig.nodeApproveType == 1 || this.approverConfig.nodeApproveType == 3) && !this.approverConfig.organizeApproveRule) {
          showMessage('请选择部门审批规则', 'warning');
          return;
        }

        if (this.approverConfig.nodeApproveType == 6 && !this.approverConfig.organizeName) {
          showMessage('请输入审批描述', 'warning');
          return;
        }

        if (this.approverConfig.nodeApproveType == 6 && !this.approverConfig.userApi) {
          showMessage('请输入查询接口', 'warning');
          return;
        }

        // nodeApproveType，自定义审批人，特殊处理
        if (this.approverConfig.nodeApproveType == 4) {
          this.approverConfig.organizeName = this.approverConfig.orgName;
          this.approverConfig.organizeCode = this.approverConfig.orgKey;
        } else if (this.approverConfig.nodeApproveType == 6) {
          this.approverConfig.organizeCode = this.approverConfig.organizeName;
        } else if (this.approverConfig.nodeApproveType == 3) {
          this.approverConfig.organizeName = this.approverConfig.fieldName;
        }

        this.approverConfig.userApiParam = this.approverConfig.userApiParamArr.length ? this.approverConfig.userApiParamArr.join(',') : '';
        if (nodeType == 6) {
          console.log(this.approversConfig, 'approversConfig');
          this.$emit('update:nodeConfig', this.approversConfig);
        } else {
          this.$emit('update:nodeConfig', this.approverConfig);
        }

        this.approverDrawer = false;
      },

      saveMakeCopy() {
        var { nodeType } = this.nodeConfig;

        if (!this.copyerConfig.nodeApproveType) {
          showMessage('请选择抄送节点类型', 'warning');
          return;
        }

        if (this.copyerConfig.nodeApproveType == 1 && !this.copyerConfig.organizeName) {
          showMessage('请选择抄送组织', 'warning');
          return;
        }

        if (this.copyerConfig.nodeApproveType == 3 && !this.copyerConfig.fieldKey) {
          showMessage('请选择抄送组织', 'warning');
          return;
        }

        if (this.copyerConfig.nodeApproveType == 4 && !this.copyerConfig.fieldName) {
          showMessage('请选择抄送人', 'warning');
          return;
        }

        if (this.copyerConfig.nodeApproveType == 3 && !this.copyerConfig.organizeApproveRule) {
          showMessage('请选择部门抄送规则', 'warning');
          return;
        }

        if (this.copyerConfig.nodeApproveType == 6 && !this.copyerConfig.organizeName) {
          showMessage('请输入抄送描述', 'warning');
          return;
        }

        if (this.copyerConfig.nodeApproveType == 6 && !this.copyerConfig.userApi) {
          showMessage('请输入查询接口', 'warning');
          return;
        }

        // nodeApproveType，自定义审批人，特殊处理
        if (this.copyerConfig.nodeApproveType == 4) {
          this.copyerConfig.organizeName = this.copyerConfig.orgName;
          this.copyerConfig.organizeCode = this.copyerConfig.orgKey;
        } else if (this.copyerConfig.nodeApproveType == 6) {
          this.copyerConfig.organizeCode = this.copyerConfig.organizeName;
        } else if (this.copyerConfig.nodeApproveType == 3) {
          this.copyerConfig.organizeName = this.copyerConfig.fieldName;
        }

        this.copyerConfig.userApiParam = this.copyerConfig.userApiParamArr.length ? this.copyerConfig.userApiParamArr.join(',') : '';

        this.$emit('update:nodeConfig', this.copyerConfig);
        this.copyerDrawer = false;
      },

      savePromoter() {
        if (!this.promoterConfig.organizeApproveRule) {
          showMessage('请选择审批规则', 'warning');
          return;
        }
        this.$emit('update:nodeConfig', this.promoterConfig);
        this.promoterDrawer = false;
      },
      arrToStr(arr, type) {
        if (arr) {
          return arr
            .map(item => {
              return type == 1 ? item.name : item.fieldName;
            })
            .toString();
        }
      },
      delNode() {
        this.parentNode.nextNode = this.nodeConfig.childNode ? this.nodeConfig.childNode.primaryKey : '';
        this.parentNode.childNode = this.nodeConfig.childNode;
        if (this.nodeConfig.childNode) {
          this.nodeConfig.childNode.parentNode = this.parentNode.primaryKey;
          this.nodeConfig.childNode.routerNodeCode = this.parentNode.routerNodeCode;
        }
        this.$emit('update:parentNode', this.parentNode);
      },
      // 添加条件
      async addTerm(type) {
        // 获取uuid
        // let primaryKeyList = [1,2,3];
        let primaryKeyList = await processGenerateKey({ nodeType: type });
        primaryKeyList = primaryKeyList.rows;
        let len = type == 1 ? this.nodeConfig.procNodeRuleList.length + 1 : this.nodeConfig.procNodeCountersignList.length + 1;
        if (type == 1) {
          this.nodeConfig.procNodeRuleList.push({
            primaryKey: primaryKeyList[0].primaryKey,
            nodeCode: '', //节点node
            nodeName: '条件' + len,
            conditionType: '', //条件类型1:表单条件；2:自定义条件
            createUser: '', //创建人信息
            nodeType: 3,
            conditionLevel: len,
            procNodeConditionList: [],
            procNodeRuleList: [],
            childNode: null,
            parentNode: this.nodeConfig.primaryKey,
            nextNode: '',
            routerNodeCode: this.nodeConfig.primaryKey,
            processCode: this.$route.query.key,
          });
        } else {
          this.nodeConfig.procNodeCountersignList.push({
            primaryKey: primaryKeyList[0].primaryKey,
            nodeCode: '', //节点node
            nodeName: '审核人' + len,
            conditionType: '', //条件类型1:表单条件；2:自定义条件
            createUser: '', //创建人信息
            error: true,
            nodeType: 7,
            conditionLevel: len,
            procNodeCountersignList: [],
            childNode: null,
            parentNode: this.nodeConfig.primaryKey,
            nextNode: '',
            routerNodeCode: this.nodeConfig.primaryKey,
            processCode: this.$route.query.key,
          });
        }
        this.$emit('update:nodeConfig', this.nodeConfig);
      },
      // 删除条件
      delTerm(index, type) {
        if (type == 3) {
          console.log('请设置条件');
          this.nodeConfig.procNodeRuleList.splice(index, 1);
          if (this.nodeConfig.procNodeRuleList.length == 1) {
            this.parentNode.nextNode = this.nodeConfig.childNode ? this.nodeConfig.childNode.primaryKey : '';
            this.parentNode.childNode = this.nodeConfig.childNode;
            if (this.nodeConfig.childNode) {
              this.nodeConfig.childNode.parentNode = this.parentNode.primaryKey;
              this.nodeConfig.childNode.routerNodeCode = this.parentNode.routerNodeCode;
            }

            this.$emit('update:parentNode', this.parentNode);
          } else {
            this.$emit('update:nodeConfig', this.nodeConfig);
          }
        } else {
          console.log('请设置会审');
          this.nodeConfig.procNodeCountersignList.splice(index, 1);

          if (this.nodeConfig.procNodeCountersignList.length == 1) {
            this.parentNode.nextNode = this.nodeConfig.childNode ? this.nodeConfig.childNode.primaryKey : '';
            this.parentNode.childNode = this.nodeConfig.childNode;
            if (this.nodeConfig.childNode) {
              this.nodeConfig.childNode.parentNode = this.parentNode.primaryKey;
              this.nodeConfig.childNode.routerNodeCode = this.parentNode.routerNodeCode;
            }

            this.$emit('update:parentNode', this.parentNode);
          } else {
            this.$emit('update:nodeConfig', this.nodeConfig);
          }
        }
      },
      async setPerson(conditionLevel) {
        var { nodeType } = this.nodeConfig;
        let strucCode = this.$route.query.strucCode;
        let formKey = this.$route.query.primaryKey;

        if (nodeType == 1) {
          //发起人
          this.promoterConfig = JSON.parse(JSON.stringify(this.nodeConfig));
          this.promoterDrawer = true;
        } else if (nodeType == 2) {
          //条件
          let conditionValueList = await processConditionValueList({ nodeType: this.nodeConfig.nodeType });
          this.conditionValueList = conditionValueList.rows;

          let fromNameList = await processFormConditionList({ formKey: formKey });
          this.fromNameList = fromNameList.rows;
          this.bPriorityLevel = conditionLevel;
          this.conditionsConfig = JSON.parse(JSON.stringify(this.nodeConfig));
          this.conditionConfig = this.conditionsConfig.procNodeRuleList[conditionLevel - 1];

          this.conditionDrawer = true;
        } else if (nodeType == 4) {
          //审核人
          let { rows } = await approvalOrganize({ structureCode: strucCode });
          this.approvalOrganizeList = rows;

          let fieldList = await processFormConditionList({ formKey: formKey });
          this.fieldList = fieldList.rows;
          // console.log(this.fieldList, 'fieldList')
          let orgData = {
            orgKey: '',
            orgName: '',
          };

          // nodeApproveType，自定义审批人，特殊处理
          if (this.nodeConfig.nodeApproveType == 4) {
            orgData.orgName = this.nodeConfig.organizeName;
            orgData.orgKey = this.nodeConfig.organizeCode;
          }

          // 默认节点类型
          if (!this.nodeConfig.nodeApproveType) {
            this.nodeConfig.nodeApproveType = 1;
          }

          // 默认节点类型
          if (!this.nodeConfig.remark) {
            this.nodeConfig.remark = 'show';
          }

          this.nodeConfig.userApiParamArr = this.nodeConfig.userApiParam ? this.nodeConfig.userApiParam.split(',') : [];
          this.approverConfig = Object.assign(orgData, JSON.parse(JSON.stringify(this.nodeConfig)));

          this.approverDrawer = true;
        } else if (nodeType == 5) {
          //抄送人
          let { rows } = await approvalOrganize({ structureCode: strucCode });
          this.approvalOrganizeList = rows;

          let fieldList = await processFormConditionList({ formKey: formKey });
          this.fieldList = fieldList.rows;

          let orgData = {
            orgKey: '',
            orgName: '',
          };

          // nodeApproveType，自定义审批人，特殊处理
          if (this.nodeConfig.nodeApproveType == 4) {
            orgData.orgName = this.nodeConfig.organizeName;
            orgData.orgKey = this.nodeConfig.organizeCode;
          }

          // 默认节点类型
          if (!this.nodeConfig.nodeApproveType) {
            this.nodeConfig.nodeApproveType = 1;
          }
          this.nodeConfig.userApiParamArr = this.nodeConfig.userApiParam ? this.nodeConfig.userApiParam.split(',') : [];
          this.copyerConfig = Object.assign(orgData, JSON.parse(JSON.stringify(this.nodeConfig)));
          this.getMangeList();

          // console.log(this.copyerConfig, 'copyerConfig')
          this.copyerDrawer = true;
        } else if (nodeType == 6) {
          //会审
          let { rows } = await approvalOrganize({ structureCode: strucCode });
          this.approvalOrganizeList = rows;
          this.bPriorityLevel = conditionLevel;

          let fieldList = await processFormConditionList({ formKey: formKey });
          this.fieldList = fieldList.rows;

          this.nodeConfig.procNodeCountersignList.forEach(item => {
            // nodeApproveType，自定义审批人，特殊处理
            if (item.nodeApproveType == 4) {
              item.orgName = item.organizeName;
              item.orgKey = item.organizeCode;
            } else {
              item.orgName = '';
              item.orgKey = '';
            }

            // 默认节点类型
            if (!item.nodeApproveType) {
              item.nodeApproveType = 1;
            }

            item.userApiParamArr = item.userApiParam ? item.userApiParam.split(',') : [];
          });

          this.approversConfig = JSON.parse(JSON.stringify(this.nodeConfig));
          this.approverConfig = this.approversConfig.procNodeCountersignList[conditionLevel - 1];

          this.approverDrawer = true;
        }
      },
      addFromItem(type) {
        this.conditionsConfig.procNodeRuleList[this.bPriorityLevel - 1].procNodeConditionList.push({
          conditionValue: '', //条件
          fieldName: '', //字段名称
          fieldValue: '', //字段值
          fieldKey: '', //字段建(后端绑定字段)
          conditionType: type, //条件类型1:表单条件；2:自定义条件
          conditionLevel: this.bPriorityLevel,
          processCode: this.$route.query.key,
        });
      },
      delFromItem(index) {
        this.conditionsConfig.procNodeRuleList[this.bPriorityLevel - 1].procNodeConditionList.splice(index, 1);
        this.$emit('update:nodeConfig', this.conditionsConfig);
      },
      fieldNameChange(val) {
        let index = val[2];
        this.conditionsConfig.procNodeRuleList[this.bPriorityLevel - 1].procNodeConditionList[index].fieldKey = val[1];
        this.conditionsConfig.procNodeRuleList[this.bPriorityLevel - 1].procNodeConditionList[index].fieldName = val[0];
        // this.$emit("update:nodeConfig", this.conditionsConfig);
      },
      onchangeName(val) {
        for (let i = 0, len = this.approvalOrganizeList.length; i < len; i++) {
          let item = this.approvalOrganizeList[i];
          if (val == item.primaryKey) {
            this.approverConfig.organizeName = item.orgName;
            this.organizeName = item.orgName;

            break;
          }
        }
      },
      onchangeRemark(val) {
        this.approverConfig.organizeName = val;
        this.approverConfig.organizeCode = val;
      },
      onchangeFieldOrgName(val) {
        console.log(val, 'val');
        for (let i = 0, len = this.fieldList.length; i < len; i++) {
          let item = this.fieldList[i];
          if (val == item.fieldKey) {
            this.approverConfig.orgName = item.fieldName;
            break;
          }
        }
      },
      onchangeCopyName(val) {
        for (let i = 0, len = this.approvalOrganizeList.length; i < len; i++) {
          let item = this.approvalOrganizeList[i];
          if (val == item.primaryKey) {
            this.copyerConfig.organizeName = item.orgName;
            break;
          }
        }
      },
      onchangeCopyRemark(val) {
        this.copyerConfig.organizeName = val;
        this.copyerConfig.organizeCode = val;
      },
      onchangeCsField(val) {
        for (let i = 0, len = this.fieldList.length; i < len; i++) {
          let item = this.fieldList[i];
          if (val == item.fieldKey) {
            this.copyerConfig.fieldName = item.fieldName;
            break;
          }
        }
      },
      onchangeField(val) {
        for (let i = 0, len = this.fieldList.length; i < len; i++) {
          let item = this.fieldList[i];
          if (val == item.fieldKey) {
            this.approverConfig.fieldName = item.fieldName;
            break;
          }
        }
      },
      async getMangeList() {
        try {
          let param = {
            processCode: this.$route.query.key,
          };
          const res = await apiCcManageList(param);
          if (res.success) {
            this.mangeList = res.rows;
          }
        } catch (err) {
          console.log(err);
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import '../../../../common/css/workflow.css';
  ::v-deep :focus {
    outline: 0;
  }
  .active1 {
    background: rgb(90, 107, 146) !important;
  }
  .active4 {
    background: rgb(255, 148, 62) !important;
  }
  .active5 {
    background: rgb(76, 150, 241) !important;
  }
  .error_tip {
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translate(150%, 0px);
    font-size: 24px;
  }
  .promoter_content {
    padding: 20px 20px;
  }
  .promoter_content .clear {
    line-height: 30px;
  }
  .promoter_content_title {
    padding-bottom: 20px;
  }
  .copyer_content .el-button,
  .approver_self_select .el-button,
  .promoter_content .el-button,
  .approver_content .el-button {
    margin-bottom: 20px;
  }
  .promoter_content p {
    padding: 18px 0;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
  }
  .promoter_person .el-dialog__body {
    padding: 10px 20px 14px 20px;
  }
  .person_body {
    display: flex;
    border: 1px solid #f5f5f5;
    height: 500px;
  }
  .person_tree {
    padding: 10px 12px 0 8px;
    width: 280px;
    height: 100%;
    border-right: 1px solid #f5f5f5;
  }
  .person_tree input {
    padding-left: 22px;
    width: 210px;
    height: 30px;
    font-size: 12px;
    border-radius: 2px;
    border: 1px solid #d5dadf;
    background: url(../../assets/img/list_search.png) no-repeat 10px center;
    background-size: 14px 14px;
    margin-bottom: 14px;
    padding-left: 30px;
  }
  .tree_nav span {
    display: inline-block;
    padding-right: 10px;
    margin-right: 5px;
    max-width: 6em;
    color: #38adff;
    font-size: 12px;
    cursor: pointer;
    background: url(../../assets/img/jiaojiao.png) no-repeat right center;
  }
  .tree_nav span:last-of-type {
    background: none;
  }
  .person_tree ul,
  .has_selected ul {
    height: 420px;
    overflow-y: auto;
  }
  .person_tree li {
    padding: 10px 0;
  }
  .person_tree li i {
    float: right;
    padding-left: 24px;
    padding-right: 10px;
    color: #3195f8;
    font-size: 12px;
    cursor: pointer;
    background: url(../../assets/img/next_level_active.png) no-repeat 10px center;
    border-left: 1px solid rgb(238, 238, 238);
  }
  .person_tree li a.active + i {
    color: rgb(197, 197, 197);
    background-image: url(../../assets/img/next_level.png);
    pointer-events: none;
  }
  .person_tree img {
    width: 14px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .has_selected {
    width: 276px;
    height: 100%;
    font-size: 12px;
  }
  .has_selected ul {
    height: 460px;
  }
  .has_selected p {
    padding-left: 19px;
    padding-right: 20px;
    line-height: 37px;
    border-bottom: 1px solid #f2f2f2;
  }
  .has_selected p a {
    float: right;
  }
  .has_selected ul li {
    margin: 11px 26px 13px 19px;
    line-height: 17px;
  }
  .has_selected li span {
    vertical-align: middle;
  }
  .has_selected li img:first-of-type {
    width: 14px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .has_selected li img:last-of-type {
    float: right;
    margin-top: 2px;
    width: 14px;
  }
  el-radio-group {
    padding: 20px 0;
  }
  .approver_content {
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
  }
  .approver_content .el-radio,
  .approver_some .el-radio,
  .approver_self_select .el-radio {
    // width: 27%;
    margin-bottom: 20px;
  }
  .copyer_content .el-checkbox {
    margin-bottom: 20px;
  }
  .el-checkbox__label {
    font-size: 12px;
  }
  .condition_content,
  .copyer_content,
  .approver_self_select,
  .approver_manager,
  .approver_content,
  .approver_some {
    padding: 10px 20px;
  }
  .approver_manager p:first-of-type,
  .approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
  }

  .approver_manager p {
    line-height: 32px;
  }
  .approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }
  .approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
  }
  .approver_self {
    padding: 28px 20px;
  }
  .selected_list {
    margin-bottom: 20px;
    line-height: 30px;
  }
  .selected_list span {
    margin-right: 10px;
    padding: 3px 6px 3px 9px;
    line-height: 12px;
    white-space: nowrap;
    border-radius: 2px;
    border: 1px solid rgba(220, 220, 220, 1);
  }
  .selected_list img {
    margin-left: 5px;
    width: 7px;
    height: 7px;
    cursor: pointer;
  }
  .approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
  }
  .condition_copyer .el-drawer__body select {
    position: absolute;
    top: 11px;
    right: 30px;
    width: 100px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }
  .condition_content p.tip {
    margin: 20px 0;
    width: 510px;
    text-indent: 17px;
    line-height: 45px;
    background: rgba(241, 249, 255, 1);
    border: 1px solid rgba(64, 163, 247, 1);
    color: #46a6fe;
    font-size: 14px;
  }
  .condition_content ul {
    max-height: 500px;
    overflow-y: scroll;
    margin-bottom: 20px;
  }
  .condition_content li > span {
    float: left;
    margin-right: 8px;
    width: 70px;
    line-height: 32px;
    text-align: right;
  }
  .condition_content li > div {
    display: inline-block;
    width: 370px;
  }
  .condition_content li:not(:last-child) > div > p {
    margin-bottom: 20px;
  }
  .condition_content li > div > p:not(:last-child) {
    margin-bottom: 10px;
  }
  .condition_content li > a {
    float: right;
    margin-right: 10px;
    margin-top: 7px;
  }
  .condition_content li select,
  .condition_content li input {
    width: 100%;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }
  .condition_content li select + input {
    width: 260px;
  }
  .condition_content li select {
    margin-right: 10px;
    width: 100px;
  }
  .condition_content li p.selected_list {
    padding-left: 10px;
    border-radius: 4px;
    min-height: 32px;
    border: 1px solid rgba(217, 217, 217, 1);
  }
  .condition_content li p.check_box {
    line-height: 32px;
  }
  .condition_list .el-dialog__body {
    padding: 16px 26px;
  }
  .condition_list p {
    color: #666666;
    margin-bottom: 10px;
  }
  .condition_list p.check_box {
    margin-bottom: 0;
    line-height: 36px;
  }
  .condition-node-box {
    min-width: 300px;
  }

  button.el-drawer__close-btn {
    display: none;
  }

  .drawer_content {
    flex: 1;
    padding: 10px 0;
  }

  .demo-drawer__content > div {
    border-top: 1px solid #f2f2f2;
  }

  .el-button {
    min-width: 79px;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 2px;
    // background: #46a6fe;
  }

  .el-button.el-button--default {
    color: #323232;
    background: #f2f2f2;
  }

  .demo-drawer__footer {
    padding: 10px 30px;
    border-top: 1px solid #f2f2f2;
  }

  .demo-drawer__footer .el-button {
    float: right;
    margin-right: 10px;
  }

  .approver_some_select {
    width: 100%;
  }
  .el-select-dropdown__list {
    padding: 0 20px;
  }
  .condition_content-input {
    width: 60%;
    height: 30px !important;
    margin-right: 20px;
  }
  .condition_content-box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .condition_content-box span {
    display: block;
    width: 80px;
    height: 32px;
    font-size: 14px;
    margin-right: 10px;
    text-align: center;
    line-height: 32px;
  }
  .condition_content-box .el-icon-close {
    width: 40px;
    height: 40px;
  }
  .button-sub {
    color: #ffffff;
  }
  .auto_overflow {
    max-height: 400px;
    overflow: auto;
  }
  .check_box a {
    font-size: 12px;
    position: relative;
    padding-left: 20px;
    margin-right: 30px;
    cursor: pointer;
    color: #333;
    white-space: pre;
  }
  .check_box a::before {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    left: 0;
    top: 3px;
    content: '';
  }
  .check_box a.active::after {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 5px;
    left: 3px;
    content: '';
  }
  .radio_box a.active::after {
    background: #46a6fe;
  }
  .check_box a.active::after {
    background: url(../../assets/img/check_box.png) no-repeat center;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }
  .el-drawer__header button.el-drawer__close-btn {
    display: none;
  }
  .make-copy-form {
    padding: 10px 0 0 20px;
  }
  .copyer-btn-box {
    border: 0 !important;
    overflow: hidden;
    padding-right: 10px;
  }
</style>
